<template>
  <div class="royole-icon">
    <div class="royole-icon__img">
      <img
        src="../assets//images/icons/icon_logo.png"
        alt="logo"
        width="24px"
        height="24px"
        mode="center widthFix"
      />
    </div>
    <div class="royole-icon__info">
      <div class="royole-icon__info__top">{{ info.name }}</div>
      <div class="royole-icon__info__bottom">
        {{ info.time + ' ｜ 来自 '
        }}<span class="royole-icon__info__bottom__right">{{
          info.device
        }}</span>
      </div>
    </div>
  </div>
</template>
<script>
// 柔宇 标题
export default {
  name: 'Royole',
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          name: 'aaa',
          time: '11',
          device: 'flex',
          avater: '../assets//images/icons/icon_logo.png',
        }
      },
    },
  },
}
</script>
<style scoped lang="scss">
.royole-icon {
  display: flex;
  align-items: center;
  &__img {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 244, 255, 1);
    border-radius: 50%;
    margin-right: 8px;
  }
  &__info {
    &__top {
      font-weight: 500;
      height: 20px;
      line-height: 20px;
    }
    &__bottom {
      padding-top: 2px;
      opacity: 0.4;
      font-size: 10px;
      line-height: 15px;
      &__right {
        font-family: Gotham-Book;
        font-weight: 300;
        font-size: 0.1rem;
      }
    }
  }
}
</style>
